<template>
    <div class="view">
        <!--        <android-nav-bar title="入驻申请" v-on:back="back"></android-nav-bar>-->
        <div class="application-header"></div>
        <div class="application-content"></div>
        <cube-scroll>
            <div class="application-form">
                <div class="application-form-title">
                    填写申请信息
                    <i class="application-form-close cubeic-close" @click="back">关闭</i>
                </div>
                <div class="application-form-box">
                    <div class="application-form-submit">
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                供应商名称
                            </div>
                            <div class="application-form-input">
                                <input v-model="saveParam.supplier_name" type="text" placeholder="请输入供应商名称"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.supplier_name" :model="saveParam.supplier_name" :rules="requiredParams"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                登录密码
                            </div>
                            <div class="application-form-input">
                                <input v-model="pw" type="password" placeholder="用于登录供应商后台"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.pw" :model="pw" :rules="passwordParams"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                企业名称
                            </div>
                            <div class="application-form-input">
                                <input v-model="saveParam.company_name" type="text" placeholder="请输入企业名称"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.company_name" :model="saveParam.company_name" :rules="requiredParams"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                企业联系人
                            </div>
                            <div class="application-form-input">
                                <input v-model="saveParam.contacts_name" type="text" placeholder="请输入企业联系人"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.contacts_name" :model="saveParam.contacts_name" :rules="requiredParams"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                联系人电话
                            </div>
                            <div class="application-form-input">
                                <input v-model="saveParam.mobile" type="tel" placeholder="请输入联系人电话"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.mobile" :model="saveParam.mobile" :rules="telParams"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                法人身份证号
                            </div>
                            <div class="application-form-input">
                                <input v-model="saveParam.id_card_no" type="text" placeholder="请输入企业法人身份证号"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.id_card_no" :model="saveParam.id_card_no" :rules="idCardParams" :messages="idCardMessages"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                联系人微信
                            </div>
                            <div class="application-form-input">
                                <input v-model="saveParam.weixin" type="text" placeholder="请输入联系人微信"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.weixin" :model="saveParam.weixin" :rules="onlyRequiredParams"></cube-validator>
                        </div>
                        <div class="application-form-cell" @click="selectArea">
                            <div class="application-form-label">
                                所在区域
                            </div>
                            <div class="application-form-input">
                                <div class="application-form-default" v-if="saveParam.area===''">请选择所在地区</div>
                                <div class="application-form-content" v-else>{{saveParam.area}}</div>
                                <!--                                <input type="text" placeholder="请输入联系人微信"></input>-->
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.area" :model="saveParam.area" :rules="onlyRequiredParams"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                详细地址
                            </div>
                            <div class="application-form-input">
                                <input v-model="saveParam.address" type="text" placeholder="请输入供应商详细地址"></input>
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.address" :model="saveParam.address" :rules="onlyRequiredParams"></cube-validator>
                        </div>
                        <div class="application-form-cell">
                            <div class="application-form-label">
                                上传营业执照
                            </div>
                            <div class="application-form-input">
                                <div class="upload-file">
                                    <cube-upload ref="upload" v-model="files" :action="uploadOption" @files-added="addedHandler" @file-error="errHandler">
                                        <div class="clear-fix">
                                            <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
                                            <cube-upload-btn :multiple="false">
                                                <p>点击上传</p>
                                            </cube-upload-btn>
                                        </div>
                                    </cube-upload>
                                </div>
                                <!--                                <input type="text" placeholder="请输入供应商详细地址"></input>-->
                            </div>
                        </div>
                        <div class="application-form-error">
                            <cube-validator v-model="valid.license_id" :model="saveParam.license_id" :rules="onlyRequiredParams" :messages="fileMessages"></cube-validator>
                        </div>
                        <div class="application-form-btn">
                            <div class="application-form-button" @click="submit">申请商家入驻</div>
                        </div>
                    </div>

                </div>
            </div>
        </cube-scroll>
        <!--        <div class="wrap">-->

        <!--        </div>-->
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class BusinessApplication extends Scene {
        private districtJsonList: any = {};
        private cascadePicker: any = "";
        private files: any[] = [];
        private pw: string = "";
        private saveParam = {
            supplier_name: "",
            password: "",
            company_name: "",
            contacts_name: "",
            mobile: "",
            id_card_no: "",
            weixin: "",
            province: "",
            city: "",
            district: "",
            area: "",
            address: "",
            license_id: ""
        };
        private valid = {
            supplier_name: undefined,
            pw: undefined,
            company_name: undefined,
            contacts_name: undefined,
            mobile: undefined,
            id_card_no: undefined,
            weixin: undefined,
            area: undefined,
            address: undefined,
            license_id: undefined
        };

        private requiredParams = {
            required: true,
            min: 2,
            max: 20,
            notWhitespace: true,
        };

        private passwordParams = {
            ...this.requiredParams,
            min: 6
        };
        private onlyRequiredParams = {
            required: true,
        };

        private telParams = {
            required: true,
            type: "tel"
        };

        private idCardParams = {
            required: true,
            notWhitespace: "",
            pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/,
        };
        private idCardMessages = {
            pattern: "不是有效的身份证号码",
        };
        private fileMessages = {
            pattern: "请上传文件",
        };

        @State("UserStore")
        public user!: InterfaceUser;

        private get uploadOption(): any {
            let uploadOption: any = {};
            uploadOption.target = this.api.imageUpload;
            uploadOption.fileName = "iFile";
            uploadOption.data = {type: "id"};
            uploadOption.headers = {token: this.user.token};
            uploadOption.checkSuccess = (res: any, file: any) => {
                try {
                    this.saveParam.license_id = res.data.id;
                } catch (e) {
                    return false;
                }

                return res.code === 1;
            };
            return uploadOption;
        }

        private back(): void {
            this.navigateBack();
        }

        private mounted() {
            Http.read(this.api.addressJson).then((res) => {
                this.districtJsonList = res;
                this.cascadePicker = (<any> this).$createCascadePicker({
                    title: "请选择所在地区",
                    data: res,
                    onSelect: this.selectCascadePickerItem
                });
            });
        }

        private addedHandler(): void {
            const file = this.files[0];
            file && (<any> this).$refs.upload.removeFile(file);
        }

        private errHandler(file: any): void {
            // const msg = file.response.message
            (<any> this).$createToast({
                type: "warn",
                txt: "上传失败",
                time: 1000
            }).show();
        }


        private selectCascadePickerItem(selectedVal: any, selectedIndex: any, selectedText: any): void {
            this.$set(this.saveParam, "province", selectedVal[0]);
            this.$set(this.saveParam, "city", selectedVal[1]);
            this.$set(this.saveParam, "district", selectedVal[2]);
            this.$set(this.saveParam, "area", `${selectedText[0]} ${selectedText[1]} ${selectedText[2]}`);
        }

        private selectArea() {
            this.cascadePicker.show();
        }

        private async submit(): Promise<any> {
            let valid = true;
            for (const key in (<any> this).valid) {
                if (!(<any> this).valid[key]) {
                    console.log(key);
                    valid = false;
                    break;
                }
            }
            if (valid) {
                const CryptoJS = require("crypto-js");
                this.saveParam.password = CryptoJS.AES.encrypt(CryptoJS.MD5(this.pw).toString(), CryptoJS.enc.Utf8.parse(this.cryptoKey), {mode: CryptoJS.mode.ECB,}).toString();
                const res = await Http.post(this.api.applyForSupplier, this.saveParam, {token: this.user.token});
                if (res.code === 1) {
                    (<any> this).$createToast({
                        type: "correct",
                        txt: "申请提交成功，等待1~5天完成审核",
                        time: 2500,
                        mask: true,
                        onTimeout: () => {
                            this.back();
                        }
                    }).show();
                } else {
                    this.globalSingleResultToast(res);
                }
                console.log(res);
            } else {
                (<any> this).$createToast({
                    type: "warn",
                    txt: "请认真填写表格内容",
                    time: 1000
                }).show();
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden

        .application-header
            padding-top var(--safe-area-inset-top);
            background-image url("/assets/images/background-business-application.png");
            height 46.875vw;
            width 100vw;
            box-sizing content-box;
            background-position center bottom;
            background-size cover;
            position absolute;

        .application-content
            min-height calc(100vh - 46.875vw - var(--safe-area-inset-top))
            background linear-gradient(to bottom, #dbce03, #eae36d) no-repeat
            position absolute;
            top calc(46.875vw + var(--safe-area-inset-top))
            width 100vw;

        .application-form
            margin calc(46.875vw + var(--safe-area-inset-top) - 20px) 25px 20px;
            border-radius 12px;
            background rgba(255, 255, 255, .9)
            box-shadow: 0 .5px 10px rgba(0, 0, 0, 0.21)

            .application-form-title
                padding 0 20px;
                height 45px;
                line-height 45px;
                border-bottom .5px solid #e7e7e7;
                position relative;

                .application-form-close
                    position absolute;
                    right 12px;
                    font-size 12px;
                    color #999;

            .application-form-box
                padding 17px 14px;

                .application-form-submit
                    .application-form-error
                        display flex;
                        align-items center;
                        margin-bottom 8px;
                        padding 0 14px;

                        >>> .cube-validator-msg-def
                            font-size 11px;

                    .application-form-cell
                        min-height 40px;
                        margin-bottom 4px;
                        padding 5px 14px;
                        background-color #f9f9f9;
                        font-size 14px;
                        display flex;
                        align-items center

                        .application-form-label
                            width 90px;
                            color #808080;
                            font-size 13px;

                        .application-form-default
                            color #808080

                        .application-form-input
                            flex 1;
                            position relative;

                            .upload-file
                                width 75px;
                                height 75px;
                                border 1px solid #ccc;

                                >>> .cube-upload
                                    .cube-upload-file, .cube-upload-btn
                                        margin 0
                                        height 75px;
                                        font-size 13px;
                                        color #808080

                                    .cube-upload-file
                                        margin: 0

                                        + .cube-upload-btn
                                            margin-top -75px;
                                            opacity 0

                                    .cube-upload-file-def
                                        width 100%
                                        height 100%

                                        .cubeic-wrong
                                            display none

                                    .cube-upload-btn
                                        display flex
                                        align-items center
                                        justify-content center

                                        > div
                                            text-align center


                            input
                                height 36px;
                                width 100%
                                background rgba(255, 255, 255, 0)

                    .application-form-btn
                        margin-top 20px;

                        .application-form-button
                            font-size 15px;
                            background linear-gradient(to top, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
                            border none;
                            color white;
                            border-radius 4px;
                            padding 0 60px;
                            height 40px;
                            line-height 40px;
                            text-align center;


        .wrap
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));
</style>
